import { Text, View } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import { CommonStyle } from '../../../../../common/commonStyle.ts';
import Swiper from 'react-native-swiper';
import { FasterImageView } from '@candlefinance/faster-image';
import EventCollection from '../../eventCollection.ts';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../../../../../redux/store.ts';
import { updateBtnInformation } from '../../../../../redux/reducers/app.ts';

interface IButtonTemplateProps {
  data: BtnModelRelations;
  btnList: IServerBtnListBtnList[];
}

const ButtonTemplate: React.FC<IButtonTemplateProps> = ({ data, btnList }) => {
  const dispatch = useDispatch<AppDispatch>();

  const handlePress = (item: IBtnFormatsList) => {
    EventCollection.onPress(item, 1, btnList);
    dispatch(updateBtnInformation({ ...item, moduleType: 1 }));
  };

  const RowSlideButtonMemo = React.memo((data: { btnFormats: BtnFormats; item: IBtnFormatsList }) => {
    return (
      <Touchable style={[styles.col, { width: `${100 / data.btnFormats.col}%` }]} onPress={() => handlePress(data.item)} onLongPress={() => EventCollection.onLongPress(data.item)} delayLongPress={500}>
        <FasterImageView style={{ width: data.btnFormats.col === 3 ? 65 : 50, height: data.btnFormats.col === 3 ? 65 : 50 }} source={{ url: data.item.value, transitionDuration: 0.3, cachePolicy: 'discWithCacheControl', showActivityIndicator: true }} />
        {data.btnFormats.col === 3 && (
          <Text fontWeight={'bold'} numberOfLines={1} fontSize={15}>
            {data.item.name}
          </Text>
        )}
        {data.btnFormats.col > 3 && (
          <Text numberOfLines={1} fontSize={13}>
            {data.item.name}
          </Text>
        )}
        {data.btnFormats.col === 3 && data.item.describes && (
          <Text fontSize={10} color={CommonStyle.deepGrey}>
            {data.item.describes}
          </Text>
        )}
      </Touchable>
    );
  });

  /**
   * 渲染模版的按钮
   * @param btnFormats
   */
  const renderBtns = (btnFormats: BtnFormats) => {
    return btnFormats.list.map((row: IBtnFormatsList[], rowIndex: number) => {
      return (
        <View style={styles.row} key={rowIndex}>
          {row.map((item, index) => {
            return <RowSlideButtonMemo key={index} btnFormats={btnFormats} item={item} />;
          })}
        </View>
      );
    });
  };

  return (
    <React.Fragment>
      {data.btnFormats.map((item, i) => {
        return (
          <React.Fragment key={i}>
            {item.list && item.list.length > 1 && (
              <Swiper loadMinimal loadMinimalSize={1} removeClippedSubviews={true} loop={false} height={(item.col === 3 ? 100 : 90) * item.row + 22} showsButtons={false} activeDotColor={CommonStyle.mainColor} paginationStyle={{ bottom: 10 }}>
                {renderBtns(item)}
              </Swiper>
            )}
            {item.list && item.list.length === 1 && renderBtns(item)}
          </React.Fragment>
        );
      })}
    </React.Fragment>
  );
};

const styles = StyleSheet.create({
  row: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
  col: { justifyContent: 'center', alignItems: 'center', marginBottom: 8 },
  slide: { flex: 1 },
});

export default ButtonTemplate;
